/<template>
  <div>
    <van-nav-bar title="首页">
      <template #right>
        <van-icon name="service-o" />
      </template>
    </van-nav-bar>

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="item in imgarr" :key="item.id">
        <img class="imgs" v-lazy="item.img" />
      </van-swipe-item>
    </van-swipe>

    <van-grid square :column-num="5">
      <van-grid-item v-for="(item, index) in imgarr" :key="index">
        <template #text>
          {{ index }}
        </template>
        <template #icon>
          <img class="imgs2" v-lazy="item.img" />
        </template>
      </van-grid-item>
    </van-grid>
    <div class="neirong">
      <div class="item_box" v-for="(item, index) in imgarr" :key="index">
        <img class="imgs3" v-lazy="item.img" />
        <p>{{item.title}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/My_axios";

import Vue from "vue";
import { NavBar, Icon, Swipe, SwipeItem, Lazyload, Grid, GridItem } from "vant";
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(NavBar);
Vue.use(Icon);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);

export default {
  data() {
    return {
      imgarr: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      axios.get("/get_home_arr").then((res) => {
        this.imgarr = res.data.arr;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.imgs {
  width: 100%;
  height: 150px;
}
.imgs2 {
  width: 40px;
  height: 40px;
}
.imgs3 {
  width: 150px;
  height: 120px;
}
.neirong{
  display: flex;
  flex-wrap: wrap;
}
.item_box{
  width: 48%;
  margin-left:1%;
  display: flex;
  flex-direction: column;
  align-items: center;

}
</style>